.wea-portal-qs {
  position: relative;
  height: 35px;
  line-height: 35px;
  background: rgba(0, 0, 0, 0.08);
  transition: background 0.6s;

  &:hover {
    background: rgba(0, 0, 0, 0.14);
  }

  &-type {
    float: left;
    position: relative;
    z-index: 2;
    width: 61px;
    cursor: pointer;

    &-name {
      float: left;
      width: 42px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
    }

    &-icon {
      float: right;
      position: relative;
      width: 18px;
      height: 35px;
      text-align: center;

      i {
        display: inline-block;
        transform: rotate(0deg);
        transition-duration: 0.3s;
      }
    }

    &.ant-popover-open {
      .wea-portal-qs-type-icon {
        i {
          transform: rotate(180deg);
        }
      }
    }
  }

  &-divider {
    float: left;
    width: 1px;
    height: 15px;
    margin: 10px 8px;
    background-color: #fff;
    opacity: 0.3;
  }

  &-content {
    position: absolute;
    width: 100%;
    height: 100%;
    padding-left: 78px;
    padding-right: 30px;

    input {
      width: 100%;
      height: 100%;
      border: 0;
      outline: none;
      box-shadow: none;
      background-color: transparent;
    }
  }

  &-search-icon {
    float: right;
    position: relative;
    z-index: 2;
    width: 30px;
    height: 35px;
    text-align: center;
    cursor: pointer;
  }

  &-overlay {
    .ant-popover-arrow,
    .ant-popover-arrow:after {
      display: block;
    }

    .ant-popover-inner {
      min-width: 100px;
    }

    .ant-popover-inner-content {
      padding: 0;
    }
  }

  &-types {
    position: relative;
    width: 100px;
    padding: 5px 0;

    &-icon {
      position: absolute;
      top: 50%;
      margin-top: -9px;
      font-size: 16px;
    }

    &-item {
      position: relative;
      padding: 5px 10px;
      color: #a6adb6;
      cursor: pointer;

      &:hover {
        color: #656b72;
        background-color: #eaeaea;
      }

      > span {
        color: #656b72;
        margin-left: 28px;
      }
    }
  }
}
